<div class = "main animated zoomIn">

    <div class="crumbs-box">
        <i class="fa fa-home"></i>
        <i>调度监控系统</i>
        <em>/</em>
        <i>调度任务信息</i>
    </div>

    <div class="search-box">
        <form id="search-form" onsubmit="return false">
            <div class="row">
                <div class="col-sm-2 labelName">调度计划编号：</div>
                <div class="col-sm-2"><input type="text" name="planId" class="form-control" maxlength="15"></div>
                <div class="col-sm-2 labelName">调度计划名称：</div>
                <div class="col-sm-2"><input type="text" name="planName" class="form-control" maxlength="30"></div>
            </div>
            <div class="row">
                <div class="col-sm-2 labelName">调度计划类别：</div>
                <div class="col-sm-2">
                    <select name="planType" id="planType" class="form-control"></select>
                </div>
                <div class="col-sm-2 labelName">创建时间：</div>
                <div class="col-sm-4">
                    <input type="text" name="fromCreateTime" class="form-control datePicker" >
                    --
                    <input type="text" name="toCreateTime" class="form-control datePicker" >
                </div>
                <div class="col-sm-2">
                    <button class="btn btn-primary" id="submitSearch">搜索</button>
                    <button class="btn btn-primary" id="submitReset">重置</button>
                </div>
            </div>
        </form>
    </div>


    <div class="content">
        <div class="panel panel-default">
            <div class="panel-heading">
                <i class="fa fa-clipboard tableIcon"></i>
                <span>调度计划列表</span>
            </div>
            <div class="panel-body grid-panel-body">
                <div class="grid-box">
                    <table id="dataGrid" class="data-grid">
                        <thead>
                            <tr>
                                <th>计划编号</th>
                                <th>计划类别</th>
                                <th>计划名称</th>
                                <th>计划优先级别</th>
                                <th>计划参数</th>
                                <th>创建时间</th>
                                <th>更新时间</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody id="planGrid">
                            <tr data-template>
                                <td class="hide" field="id">{{id}}</td>
                                <td>
                                    <a href="#/planExecution">
                                        <span onclick="getPlanId(this)">{{planId}}</span>
                                    </a>
                                </td>
                                <td field="planType">{{planType}}</td>
                                <td field="planName">{{planName}}</td>
                                <td field="planLevel">{{planLevel}}</td>
                                <td field="planParam">{{planParam}}</td>
                                <td field="createTime">{{createTime}}</td>
                                <td field="updateTime">{{updateTime}}</td>
                                <td>
                                    <i class="fa fa-edit editBtn" role="edit" title="修改"></i>
                                    <!--<i class="fa fa-paper-plane editBtn" role="reply" title="重新执行"></i>-->
                                    <a href="#/planExecution">
                                        <i class="fa fa-mail-forward editBtn" role="jump" onclick="getRowId(this)"></i>
                                    </a>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <div id="paper" class="pager-box"></div>
            </div>
        </div>
    </div>
</div>

<template>
    <div class="template">
        <form id="editForm">
            <div class="row">
                <div class="col-sm-3 labelName">调度计划编号：</div>
                <div class="col-sm-9">
                    <input type="hidden" name="id">
                    <input type="text" class="form-control" name="planId">
                </div>
            </div>
            <div class="row">
                <div class="col-sm-3 labelName">调度计划类别：</div>
                <div class="col-sm-9">
                    <select type="select" class="form-control" name="planType" id ="planType1" required></select>
                </div>
            </div>

            <div class="row">
                <div class="col-sm-3 labelName">调度计划参数：</div>
                <div class="col-sm-9">
                    <input type="text" class="form-control" name="planParam" maxlength="30" required>
                </div>
            </div>

            <div class="row">
                <div class="col-sm-5 labelName">计划名称：</div>
                <div class="col-sm-7">
                    <input type="text" class="form-control" name="planName" maxlength="30" required>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-5 labelName">优先级：</div>
                <div class="col-sm-7">
                    <input type="number" class="form-control" name="planLevel" required min="1" max="10" pattern="/^\d{1,2}$/"/>
                </div>
            </div>
        </form>
    </div>
</template>
<script src="planInfo.js"></script>